<template>
  <el-drawer
    v-model="visible"
    :title="`配置 ${componentConfig?.title || '组件'}`"
    direction="rtl"
    size="400px"
    :before-close="handleClose"
  >
    <div v-if="componentConfig" class="config-panel">
      <!-- 基础配置 -->
      <el-card class="config-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><Setting /></el-icon>
            <span>基础配置</span>
          </div>
        </template>
        
        <el-form :model="localConfig" label-width="80px" size="default">
          <el-form-item label="标题">
            <el-input v-model="localConfig.title" placeholder="请输入组件标题" />
          </el-form-item>
          
          <el-form-item label="显示">
            <el-switch v-model="localConfig.visible" />
          </el-form-item>
          
          <el-form-item label="高度">
            <el-select v-model="localConfig.height" placeholder="选择高度">
              <el-option label="自动" value="auto" />
              <el-option label="小 (200px)" value="200px" />
              <el-option label="中 (300px)" value="300px" />
              <el-option label="大 (400px)" value="400px" />
              <el-option label="超大 (500px)" value="500px" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 样式配置 -->
      <el-card class="config-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><Brush /></el-icon>
            <span>样式配置</span>
          </div>
        </template>
        
        <el-form :model="localConfig.style" label-width="80px" size="default">
          <el-form-item label="背景色">
            <el-color-picker v-model="localConfig.style.backgroundColor" show-alpha />
          </el-form-item>
          
          <el-form-item label="边框">
            <el-switch v-model="localConfig.style.showBorder" />
          </el-form-item>
          
          <el-form-item label="阴影">
            <el-select v-model="localConfig.style.shadow" placeholder="选择阴影">
              <el-option label="无" value="never" />
              <el-option label="悬停" value="hover" />
              <el-option label="总是" value="always" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="圆角">
            <el-slider v-model="localConfig.style.borderRadius" :min="0" :max="20" show-input />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 图表配置 (仅图表组件) -->
      <el-card v-if="componentConfig.type === 'chart'" class="config-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><TrendCharts /></el-icon>
            <span>图表配置</span>
          </div>
        </template>
        
        <el-form :model="localConfig.chartConfig" label-width="80px" size="default">
          <el-form-item label="图表类型">
            <el-select v-model="localConfig.chartConfig.type" placeholder="选择图表类型">
              <el-option label="折线图" value="line" />
              <el-option label="柱状图" value="bar" />
              <el-option label="饼图" value="pie" />
              <el-option label="面积图" value="area" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="主题色">
            <el-color-picker v-model="localConfig.chartConfig.color" />
          </el-form-item>
          
          <el-form-item label="显示网格">
            <el-switch v-model="localConfig.chartConfig.showGrid" />
          </el-form-item>
          
          <el-form-item label="显示图例">
            <el-switch v-model="localConfig.chartConfig.showLegend" />
          </el-form-item>
          
          <el-form-item label="数据标签">
            <el-switch v-model="localConfig.chartConfig.showDataLabels" />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 快捷操作配置 (仅快捷操作组件) -->
      <el-card v-if="componentConfig.type === 'quickActions'" class="config-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><Operation /></el-icon>
            <span>操作配置</span>
          </div>
        </template>
        
        <el-form :model="localConfig.actionsConfig" label-width="80px" size="default">
          <el-form-item label="布局方式">
            <el-select v-model="localConfig.actionsConfig.layout" placeholder="选择布局">
              <el-option label="网格" value="grid" />
              <el-option label="垂直" value="vertical" />
              <el-option label="紧凑" value="compact" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="显示图标">
            <el-switch v-model="localConfig.actionsConfig.showIcons" />
          </el-form-item>
          
          <el-form-item label="每行数量">
            <el-slider v-model="localConfig.actionsConfig.itemsPerRow" :min="2" :max="6" show-input />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 数据配置 -->
      <el-card class="config-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><DataBoard /></el-icon>
            <span>数据配置</span>
          </div>
        </template>
        
        <el-form :model="localConfig.dataConfig" label-width="80px" size="default">
          <el-form-item label="数据源">
            <el-select v-model="localConfig.dataConfig.source" placeholder="选择数据源">
              <el-option label="模拟数据" value="mock" />
              <el-option label="API接口" value="api" />
              <el-option label="本地数据" value="local" />
            </el-select>
          </el-form-item>
          
          <el-form-item v-if="localConfig.dataConfig.source === 'api'" label="API地址">
            <el-input v-model="localConfig.dataConfig.apiUrl" placeholder="请输入API地址" />
          </el-form-item>
          
          <el-form-item label="刷新间隔">
            <el-select v-model="localConfig.dataConfig.refreshInterval" placeholder="选择刷新间隔">
              <el-option label="不刷新" :value="0" />
              <el-option label="30秒" :value="30" />
              <el-option label="1分钟" :value="60" />
              <el-option label="5分钟" :value="300" />
              <el-option label="10分钟" :value="600" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="缓存数据">
            <el-switch v-model="localConfig.dataConfig.enableCache" />
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <template #footer>
      <div class="config-footer">
        <el-button @click="handleReset">重置</el-button>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { 
  Setting, 
  Brush, 
  TrendCharts, 
  Operation, 
  DataBoard 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  componentConfig: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'save'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const localConfig = ref({})
const originalConfig = ref({})

// 默认配置
const getDefaultConfig = () => ({
  title: '',
  visible: true,
  height: 'auto',
  style: {
    backgroundColor: '#ffffff',
    showBorder: true,
    shadow: 'hover',
    borderRadius: 4
  },
  chartConfig: {
    type: 'line',
    color: '#409EFF',
    showGrid: true,
    showLegend: true,
    showDataLabels: false
  },
  actionsConfig: {
    layout: 'grid',
    showIcons: true,
    itemsPerRow: 3
  },
  dataConfig: {
    source: 'mock',
    apiUrl: '',
    refreshInterval: 0,
    enableCache: true
  }
})

// 监听组件配置变化
watch(
  () => props.componentConfig,
  (newConfig) => {
    if (newConfig) {
      const defaultConfig = getDefaultConfig()
      localConfig.value = {
        ...defaultConfig,
        ...newConfig,
        style: { ...defaultConfig.style, ...(newConfig.style || {}) },
        chartConfig: { ...defaultConfig.chartConfig, ...(newConfig.chartConfig || {}) },
        actionsConfig: { ...defaultConfig.actionsConfig, ...(newConfig.actionsConfig || {}) },
        dataConfig: { ...defaultConfig.dataConfig, ...(newConfig.dataConfig || {}) }
      }
      originalConfig.value = JSON.parse(JSON.stringify(localConfig.value))
    }
  },
  { immediate: true, deep: true }
)

// 保存配置
const handleSave = () => {
  emit('save', { ...localConfig.value })
  ElMessage.success('配置已保存')
  visible.value = false
}

// 重置配置
const handleReset = () => {
  localConfig.value = JSON.parse(JSON.stringify(originalConfig.value))
  ElMessage.info('配置已重置')
}

// 关闭面板
const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
.config-panel {
  padding: 0;
}

.config-section {
  margin-bottom: 16px;
}

.config-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid var(--el-border-color-light);
}

:deep(.el-card__header) {
  padding: 12px 16px;
  background-color: var(--el-bg-color-page);
}

:deep(.el-card__body) {
  padding: 16px;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
}

:deep(.el-drawer__body) {
  padding: 20px;
}

:deep(.el-drawer__footer) {
  padding: 16px 20px;
  border-top: 1px solid var(--el-border-color-light);
}
</style>